<template>
  <div class="mian">
    <div class="users">
      <img src="@/assets/0.jpg" alt="" />
      <div class="netuser">
        <div>{{commentdata.user.nickname}}</div>
        <i>2小时前</i>
      </div>
      <span>回复</span>
    </div>
    <Parent v-if="commentdata.parent" :parentdata="commentdata.parent" />
    <div class="midle">
      {{ commentdata.content }}
    </div>
  </div>
</template>

<script>
import Parent from "../Comment/Parent";
export default {
  props: ["commentdata"],
  components: {
    Parent,
  },
};
</script>

<style lang="less" scoped>
.mian {
  font-size: 16/360 * 100vw;
  border-bottom: 1px solid gray;
  padding: 5/360 * 100vw;
  margin: 3/360 * 100vw;
  .midle {
    padding: 5/360 * 100vw 0;
  }
}
.users {
  display: flex;
  padding-top: 15/360 * 100vw;
  img {
    width: 30/360 * 100vw;
    height: 30/360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
  .netuser {
    flex: 1;
    padding-left: 10/360 * 100vw;
    i {
      font-size: 5/360 * 100vw;
      color: #acacac;
    }
  }
  span {
    color: #acacac;
    font-size: 10/360 * 100vw;
  }
}
.publish {
  padding-top: 10/360 * 100vw;
  height: 40/360 * 100vw;
  line-height: 40/360 * 100vw;
  border-bottom: 1px solid #acacac;
}
</style>